<template>
  <div class="assets-main">
    <div class="head-row">
      <div class="left">
        <img src="@/assets/dashboard/myPending/close.png" alt="" @click="close">
        <span class="title">补货采购受理</span>
      </div>
    </div>
    <div class="content-row">
      <div class="base-info">
        <div class="row w50">
          <div class="label">补货单号</div>
          <div class="value">SQ-SL202211041844</div>
        </div>
        <div class="row w50">
          <div class="label">申请部门</div>
          <div class="value">资产管理本部</div>
        </div>
        <div class="row w100">
          <div class="label">申请理由</div>
          <div class="value">这是一段于申请理由相关的文字申请理由相关的文字申请理由相关的文字申请理由相关的文字</div>
        </div>
      </div>
      <div class="procurement-list">
        <div class="title-row">
          <span class="title">采购清单</span>
          <span class="total">合计</span>
          <span class="value">¥20000</span>
        </div>
        <div>
          <el-table
            class="procurement-list-table"
            :header-cell-style="{background:'#fafafa',color:'#565551'}"
            border
            :data="procurementList"
            style="width: 100%">
            <el-table-column
              prop="repName"
              label="物品名称"
              min-width="450"
            >
              <template slot-scope="scope">
                <div class="gmName-title">
                  <span class="gmName">{{ scope.row.repName }}</span>
                  <div class="unitName">单位：{{ scope.row.repMeasuringUnitName }}</div>
                </div>
                <div class="infoRow">
                  <span>编号：{{ scope.row.gmId }}</span>
                  <span>分类：{{ scope.row.repTypeName }}</span>
                  <span>品牌：{{ scope.row.repBrand }}</span>
                </div>
                <div class="infoRow">
                  <span>型号：{{ scope.row.repModel }}</span>
                  <span>规格：{{ scope.row.repSpec }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="gmProportion"
              label="默认比例"
              width="90"
            >
            </el-table-column>
            <el-table-column
              prop="repNumber"
              label="当前库存"
              width="130"
            >
              <template slot-scope="scope">
                {{ scope.row.repNumber }}{{ scope.row.repMeasuringUnitName }}
              </template>
            </el-table-column>
            <el-table-column
              prop="gmNumber"
              label="补货数量"
              width="130"
            >
<!--              <template slot-scope="scope">-->
<!--                <el-input type="number" v-model="scope.row.gmNumber" placeholder="请输入补货数量"></el-input>-->
<!--              </template>-->
            </el-table-column>
            <el-table-column
              prop="repPrice"
              label="单价(¥)"
              width="120"
            >
              <template slot-scope="scope">
                <el-input v-model="scope.row.repPrice" placeholder="请输入单价"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="repTotal"
              label="总价"
              width="120"
            >
              <template slot-scope="scope">
                ¥{{ (scope.row.repTotal||0) }}
              </template>
            </el-table-column>
            <el-table-column
              prop="repSupplierNo"
              label="预供应商"
              width="160"
            >
              <template slot-scope="scope">
                <el-select placeholder="请选择" v-model="scope.row.repSupplierNo">
                  <el-option :value="scope.row.repSupplierNo" :label="scope.row.repSupplier"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column
              prop="remark"
              label="备注"
              width="160"
            >
              <template slot-scope="scope">
                <el-input type="textarea" v-model="scope.row.remark" placeholder="请输入备注"></el-input>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div class="footer-row">
      <div class="btn-row">
        <div class="btn-false">取消</div>
        <div class="btn-true">确定</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex"
export default {
  components: {
  },
  name: "",
  props: {
    assetsData: {
      type: Object,
      default: ()=>({})
    },
  },
  data() {
    return {
      nowData: {},
      formData: {
        p_COM_comment: '',
        p_B_outcome: ''
      },
      procurementList: [],
    }
  },
  computed: {
  },
  mounted() {
    this.procurementList = [
      {
        gmId: 'D601020001',
        repName: '显示器',
        repTypeName: '办公用品',
        repSpec: '61*43*44',
        repBrand: '联想',
        repModel: 'abc1234567',
        repMeasuringUnitName: '台',
        repNumber: 1000,
        gmNumber: 10,
        repPrice: 2000,
        repTotal: 20000,
        repSupplierNo: 'KH-20230609-002361',
        repSupplier: '永辉超市股份有限公司',
        gmProportion: '1',
        remark: '',
      },
    ]
  },
  methods: {
    close() {
      this.$emit('close')
    },
    //审核操作
    handleAudit(flag){
      this.formData.p_B_outcome = flag
    },
  },
};
</script>
<style lang="less" scoped>
@textColor: #1f1e1d;
@ntalkColor: #e67529;
.assets-main {
  width: calc(100% - 44px);
  height: 100%;
  background-color: #fff;
  //animation: document-move-in 0.5s;
  transform: translateX(0);
  .head-row {
    width: 100%;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f2f3f6;
    box-sizing: border-box;
    padding: 0 24px;
    .left {
      display: flex;
      align-items: center;
      img {
        width: 20px;
        height: 20px;
        cursor: pointer;
      }
      .title {
        margin-left: 16px;
        color: @textColor;
        font-size: 16px;
        line-height: 24px;
      }
    }
  }
  .content-row {
    width: 100%;
    height: calc(100% - 128px);
    overflow-y: auto;
    background-color: #f2f3f6;
    .base-info {
      box-sizing: border-box;
      padding: 24px 24px 8px 24px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      background-color: #fff;
      .row {
        display: flex;
        margin-bottom: 16px;
        /deep/ .el-radio__input.is-checked+.el-radio__label {
          color: @ntalkColor;
        }
        /deep/ .el-radio__input.is-checked .el-radio__inner {
          border-color: @ntalkColor;
          background: @ntalkColor;
        }
        .label {
          width: 80px;
          padding: 4px 24px 4px 0;
          box-sizing: border-box;
          font-size: 14px;
          color: #565551;
          text-align: right;
        }
        .value {
          width: calc(100% - 80px);
          font-size: 14px;
          color: @textColor;
          overflow: hidden;
          text-overflow: ellipsis;
          padding: 4px 0;
        }
        &.w100 {
          width: 100%;
        }
        &.w50 {
          width: 50%;
        }
      }
    }
    .procurement-list {
      box-sizing: border-box;
      padding: 24px;
      margin-top: 8px;
      background-color: #fff;
      .title-row {
        width: 100%;
        display: flex;
        align-items: center;
        .title {
          font-size: 16px;
          color: @textColor;
        }
        .total {
          margin-left: 16px;
          font-size: 12px;
          color: rgba(0,0,0,0.44);
        }
        .value {
          margin-left: 4px;
          font-size: 12px;
          color: #1677ff;
        }
      }
      .procurement-list-table {
        width: 100%;
        margin-top: 16px;
        border-radius: 6px;
        /deep/ .wtmStatus-0 {
          font-size: 12px;
          line-height: 24px;
          padding: 0 8px;
          border-radius: 4px;
          border: 1px solid #b7eb8f;
          background-color: #f6ffed;
          color: #52c41a;
          width: fit-content;
        }
        /deep/ .wtmStatus-5 {
          font-size: 12px;
          line-height: 24px;
          padding: 0 8px;
          border-radius: 4px;
          border: 1px solid #d6d5ca;
          background-color: #fafafa;
          color: #8d8c85;
          width: fit-content;
        }
        /deep/ .colorgray {
          color: #8d8c85;
        }
        /deep/ .gmName-title {
          display: flex;
          align-items: center;
          .unitName {
            margin-left: 8px;
            padding: 2px 8px;
            color: #8d8c85;
            background-color: #f0f0f0;
            border-radius: 4px;
          }
        }
        /deep/ .infoRow {
          display: flex;
          align-items: center;
          color: #8d8c85;
          span {
            white-space: nowrap;
            &:first-of-type {
              min-width: 150px;
            }
            &:nth-of-type(2) {
              min-width: 150px;
            }
          }
        }
      }
    }
  }
  .footer-row {
    width: 100%;
    height: 64px;
    box-shadow: 0px -4px 8px 0px rgba(0, 0, 0, 0.08);
    border-top: 1px solid #f2f3f6;
    padding: 0 24px;
    box-sizing: border-box;
    .btn-row {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-top: 16px;
      .btn-false, .btn-down {
        cursor: pointer;
        border-radius: 6px;
        padding: 5px 16px;
        background-color: #f0f0f0;
        color: #1f1e1d;
        font-size: 14px;
        line-height: 22px;
        margin-right: 8px;
      }
      .btn-true {
        cursor: pointer;
        border-radius: 6px;
        padding: 5px 16px;
        background-color: @ntalkColor;
        color: #fff;
        font-size: 14px;
        line-height: 22px;
      }
    }
  }
}
</style>
